

<style type="text/css">

    /* .a {
        width: 310px;
        position: absolute;
        left: calc(100% / 2 - 170px);
        margin-top: 150px;
        padding: 10px;
        border-radius:1px;
    } */

    @media only screen and (min-width: 450px) {
        .a {
            width: 310px;
            position: absolute;
            left: calc(100% / 2 - 170px);
            margin-top: 150px;
            padding: 10px;
            border-radius:1px;
        }
    }
 
    h2{
        margin-top: 5px;
        margin-bottom: 20px;
        text-align: center;
        color: gray;
    }
    .verification{
        width: 100%;
        margin-bottom: 10px;
    }
    .verification .ver-img img{
        cursor: pointer;
        height: 38px;
        width: 100px;
        border: 1px solid #e6e6e6;
    }
    .verification .ver-input{
        float: right;
        margin: 0;
    }
    .enian-float-right{
        float: right;
    }
    body a{
        cursor: pointer;    
    }
    .qr-login{
        /*height: 300px;
        width: 400px;*/
        /*background: gray;*/
    }
    .qr-login img{
        margin-top: 10px;
        height: 170px;
        
    }
    .qr-login .content{
        margin: auto;
        text-align: center;
    }
    .qr-login .content .text{
        margin-top: 20px;
    }
    .qr-login .content .wxapp-qr{
        color: blueviolet;
    }
    #wxapp-logo{
        position: absolute;
        top: 30px;
        /*border: 1px solid darkgray;*/
        
        left: calc(100% - 50% - 170px / 2);
    }
    #wxapp-logo img{
        border: 1px solid #e6e6e6;
        height: 150px;
    }
    @media only screen and (max-width: 449px) {
        .a {
            width: 90%;
            margin: 60px auto;
        }
    }
</style>
<div class='layui-main a'>
    <h2  class="title">日历记事本 - 登录</h2>

    <form class="layui-form layui-form-pane" action="" method="POST">
        
        <div class="layui-form-item">
            <input type="text" name="username" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
        </div>

        <div class="layui-form-item">
            <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        
        <!-- <div class="verification layui-inline">
            <div class="layui-inline ver-img" title="单击刷新">
                <img src="http://enianteam.com/captcha.html" alt="captcha" onclick="this.src=this.src+'?'" />
            </div>
            <div class="layui-inline ver-input">
                <input type="password" name="captcha"  lay-verify="" placeholder="请输入验证码" autocomplete="off" class="layui-input">
            </div>
        </div> -->

    
        <div style="float: right;margin-bottom:10px;max-height:25px"><input type="checkbox" title="记住密码" lay-filter="remember_password" lay-skin="primary"></div>
        
        <div class="layui-form-item" align="center">
            <div class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit="" id='btn_login'>登录</div>
        </div>
        
        <div>
            <a class="register-username layui-hide">注册账号</a>
            <a class="enian-float-right">忘记密码?</a>
        </div>
        
       
    </form>
</div>

        


<script>
    app.base.loadApi('apiLogin');
    layui.use(['form', 'layer','jquery','laytpl','apiLogin'], function() {
        var form = layui.form;
        var $ = layui.jquery;
        var laytpl = layui.laytpl;
        var timeOut
        var qrContent={
                type:'login'
                ,code:false
            };
        var remember_password=false
        form.render()
        // 获取基础信息
        layui.apiLogin.getOpenInfo(function(d){
            if(d.open_register=='1'){
                $('.register-username').removeClass('layui-hide');
            }
        })

        app.base.setTitle('日历记事本 - 登录');
        var remember_login_info = layui.data('remember_login_info');
        if(remember_login_info.username){
            $('input[name="username"]').val(remember_login_info.username)
            $('input[lay-filter="remember_password"]').attr("checked",true)
            remember_password=true
            form.render()
        }

        if (remember_login_info.password) {
            $('input[name="password"]').val(remember_login_info.password)
        }
        
        
        // 跳转注册页
        $('.register-username').click(function(){
            app.go(app.base.route.register);
        })

        // 重置密码
        $('.enian-float-right').click(function () {
            app.go(app.base.route.forgetPassword);
        })

        form.on('checkbox(remember_password)', function (data) {
            remember_password= data.elem.checked
        }); 

        $('#btn_login').click(function(){
            var username= $('input[name="username"]').val()
            var password = $('input[name="password"]').val()
            if (remember_password) {
                layui.data('remember_login_info', {
                    key: 'username'
                    , value: username
                });
                layui.data('remember_login_info', {
                    key: 'password'
                    , value: password
                });
            }else{
                layui.data('remember_login_info', null);
            }
            layui.apiLogin.check(username, password,function(){
                layer.closeAll();
                layer.msg('登录成功');
                window.clearInterval(timeOut);//关闭定时
                app.go(app.base.route.home)
            },function(msg){
                 layer.msg(msg);
            })
        })
       
        function getVerificationCode(callback){
            $.ajax({
                type:"post",
                url:"/index/login/verifcationcode/",
                success:function(r){
                    if(r.code==1){
                        callback(r.verifcationCode);
                    }else{
                        layer.alert(r.msg);
                    }
                },
                async:true
            });
        }
    });
</script>
